<template>
  <div class="home-page">
    <!-- 顶部导航栏 -->
    <div class="top-bar">
      <h1>游戏库</h1>
      <div class="top-icons">
        <van-icon name="search" size="20" color="#333"/>
      </div>
    </div>

    <!-- 标签切换 -->
    <van-tabs v-model:active="tab" swipeable>
      <van-tab name="recommend" title="推荐">
        <GameLibraryRecommend />
      </van-tab>
      <van-tab name="rank" title="榜单">
        <GameLibraryRank />
      </van-tab>
    </van-tabs>
  </div>
</template>


<script setup lang="ts">
import { ref } from 'vue'
import GameLibraryRecommend from './GameLibraryRecommend.vue'
import GameLibraryRank from './GameLibraryRank.vue'

// 标签页控制
const tab = ref('recommend')

</script>


<style scoped>
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.top-icons {
  display: flex;
  gap: 12px;
}

.home-page {
  padding: 16px;
  background: #f5f5f5;
  min-height: 100vh;
}
</style>

